<template>
	<div class="component-TrainList">
		<p class="title">训练试卷</p>
		<div class="exam-wrap" v-for="item in list" :key="item.examId" @click="goTo(item)">
			<div class="item">
				<div class="item-title">
					<span>{{ item.name }}</span>
					<span class="f12">{{ item.trainExamStatus | trainExamStatus }}</span>
				</div>
				<p>考试时限：{{ item.answerTimeLimit | formatMinute }}分钟</p>
				<p>是否需要改卷：{{ item.correction ? "需要改卷" : "不需要改卷" }}</p>
				<p>组卷时间：{{ item.createTime | formatDateTime }}</p>
				<p>总分：{{ item.totalScore }}</p>
				<p>成绩：{{ item.totalScore }}</p>
				<p>答题时间：{{ item.answerUseTime ? item.answerUseTime : "未答题" }}</p>
				<p>答题情况：查看详情</p>
			</div>
		</div>
	</div>
</template>
<script>
// import { throttle } from "filters/throttle.js";
import { mapState } from "vuex";
export default {
	name: "notice",
	props: {
		list: {
			type: Array,
			default: [],
		},
	},

	data() {
		return {};
	},
	computed: {
		...mapState({
			examId: (state) => state.exam.examId,
		}),
	},
	methods: {
		goTo(data) {
			if (!data.answerTimeLimit) {
				this.$toast("考试状态异常");
				return;
			}
			if (data.trainExamStatus === "CREATE") {
				this.$router.push({
					path: "/edit-papers",
					query: {
						examId: data.examId,
					},
				}); //else if (data.trainExamStatus === "EDIT") {
			} else {
				if (data.examId === this.examId) {
					this.$router.push({
						path: "/exam",
						query: {
							examId: data.examId,
							train: 1,
							time: data.answerTimeLimit,
						},
					});
				} else {
					this.$dialog.confirm({
						title: "",
						message: "确认开始考试",
						beforeClose: (action, done) => {
							console.log(action);
							if (action === "confirm") {
								this.$APIs
									.trainConfirm({ examId: data.examId })
									.then((response) => {
										done();
										this.$router.push({
											path: "/exam",
											query: {
												examId: data.examId,
												train: 1,
												time: data.answerTimeLimit,
											},
										});
									})
									.catch((error) => {
										done();
									});
							} else {
								done();
							}
						},
					});
				}
			}
			// this.$router.push({
			//     path: "exam-instruction",
			//     query: {
			//         examId: data.examId,
			//         train: 1,
			//         time: data.answerTimeLimit,
			//     },
			// });
		},
	},
};
</script>
<style scoped lang="scss">
.component-TrainList {
	background-color: #21202e;
	padding: 15px;
	.title {
		color: #fff;
		font-size: 18px;
		margin-bottom: 10px;
	}
	.item {
		padding: 15px;
	}
	.item-title {
		font-size: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 6px;
	}
	.wrap-footer {
		padding: 15px 10px;
		text-align: right;
		font-size: 12px;
	}
	.exam-wrap {
		border: 1px solid #2d2c3c;
		margin-bottom: 15px;
	}
	p {
		line-height: 26px;
		font-size: 12px;
	}
}
</style>
